<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
    <div class="box-card-image-container" >
      <el-image :src="formatImagePath" style="width: 100%; height: auto; max-height: 150px"
                :preview-src-list="formatPreviewImages">
      </el-image>
      <!-- 选择 -->
      <el-checkbox class="check-image-box" :disabled="image.isDisabled" v-model="image.isSelected" @change="handleItemChecked" ></el-checkbox>
      <!-- 删除按钮 -->
      <el-button
        class="del-image-button"
        size="mini"
        disabled
        icon="el-icon-delete"
        @click="handleDelImage"
      >
      </el-button>
    </div>
    <div class="box-card-desc-container">
      <el-tooltip placement="top">
        <div slot="content" style="max-width: 250px;" >
          {{ image.gName }}
        </div>
        <span v-html="image.gName"></span>
      </el-tooltip>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    image: {
      type: Object,
      default: {},
    }
  },
  computed: {
    formatImagePath() {
      if (this.image.imagePath && this.image.imagePath.indexOf('http') !== 0) {
        console.log('path: ', this.imgServe + this.image.imagePath)
        return this.imgServe + this.image.imagePath
      } else {
        return this.image.imagePath;
      }
    },
    formatPreviewImages() {
      return [ this.formatImagePath ]
    }
  },
  data() {
    return {
      imgServe: process.env.VUE_APP_BASE_API,
    }
  },
  methods: {
    handleDelImage() {
      this.$emit('delImage', this.image)
    },
    handleItemChecked() {
      this.$emit('itemChecked')
    }
  },
}
</script>

<style scoped>
.box-card {
  position: relative;
  width: 150px;
  height: 190px;
  margin-top: 10px;
  margin-right: 20px;
}
.box-card-image-container {
  position: relative;
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
}
/* 删除按钮样式 */
.check-image-box {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 10;
  padding: 6px 8px;
  background-color: rgba(255, 255, 255, 0.8);
}
/* 删除按钮样式 */
.del-image-button {
  position: absolute;
  top: 1px; /* 距离顶部 10px */
  right: 1px; /* 距离右侧 10px */
  z-index: 10; /* 确保按钮在图片上方 */
  background-color: rgba(255, 255, 255, 0.8);
}
.box-card-opt-container {
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  bottom: 40px;
  padding: 5px 10px;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: space-around;

  i {
    padding: 0 10px;
    background-color: #ffffff;
  }
}
.box-card-image-container:hover {
  .box-card-opt-container {
    z-index: -1;
  }
}
.box-card-desc-container {
  padding: 1px 10px;
  font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
  display: -webkit-box; /* 启用弹性盒子布局 */
  -webkit-box-orient: vertical; /* 设置子元素垂直排列 */
  -webkit-line-clamp: 2; /* 设置显示的最大行数为 2 行 */
}

.name-container >>> .el-tooltip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
